<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">


        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">管理账号</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="username"
                                   placeholder="管理员账户">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">操作类型</label>
                        <div class="layui-input-inline">
                            <select name="uri" lay-verify="required" lay-search>
                                <option value="0">所有记录</option>
                                <{foreach from=$uris item=$item}>
                                <option value="<{$item->uri}>"><{$item->operation_title}></option>
                                <{/foreach}>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">时间范围</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" autocomplete="off"
                                   name="start_time" id="laydate-start" placeholder="开始日期">
                        </div>
                        <div class="layui-form-mid">
                            至
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" autocomplete="off" name="end_time"
                                   id="laydate-end" placeholder="结束日期">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-search">查询
                        </button>
                    </div>
                </div>

            </div>
        </fieldset>
        <table class="layui-hide" id="table-page" lay-filter="table-action"></table>
        <script type="text/html" id="table-action">
            <a class="layui-btn layui-btn-xs" lay-event="profile">详情</a>
        </script>

    </div>
</div>

<script type="text/javascript">
    layui.use(['table', 'laydate', 'form','miniPage'], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var miniPage = layui.miniPage;

        form.render();
        //开始日期
        var insStart = laydate.render({
            elem: '#laydate-start'
            , type: 'date'
            , done: function (value, date) {
                //更新结束日期的最小日期
                insEnd.config.min = lay.extend({}, date, {
                    month: date.month - 1
                });
                //自动弹出结束日期的选择器
                insEnd.config.elem[0].focus();
            }
        });

        //结束日期
        var insEnd = laydate.render({
            elem: '#laydate-end'
            , type: 'date'
            , done: function (value, date) {
                //更新开始日期的最大日期
                insStart.config.max = lay.extend({}, date, {
                    month: date.month - 1
                });
            }
        });

        form.on('submit(LAY-app-search)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('table-page', {
                where: field
            });
        });
        table.render({
            elem: '#table-page'
            , url: '/<{$module}>/<{$controller}>/index?do=list&isajax=1'
            , limit: 30
            , height: 'full-250'//无搜索条件
            , cols: [[
                {field: 'id', width: 80, title: 'ID', sort: true}
                , {field: 'username', width: 150, title: '用户名'}
                , {field: 'title', width: 150, title: '操作标题'}
                , {field: 'uri', width: 250, title: '操作地址'}
                , {field: 'time', width: 180, title: '操作时间'}
                , {toolbar: '#table-action'}
            ]]
            , page: true
        });
        var $ = layui.$, active = {
            profile: function (obj) { //获取选中数据
                var data = obj.data;
                var content = miniPage.getHrefContent('/<{$module}>/<{$controller}>/profile?id=' + data.id);
                layer.open({
                    type: 1
                    , title: '操作日志详情'
                    , content: content
                    , maxmin: true
                    , area: ['60%', '90%']
                    , btn: ['关闭']
                });
            }
        };
        //监听工具条
        table.on('tool(table-action)', function (obj) {
            var type = obj.event;
            active[type] ? active[type].call(this, obj) : '';
        });
    });
</script>